<template>
	<view class="">
		<view class="user-info" v-if="!isLoad" >
			<view class="transparent"></view>
			<image :src="user.cover" mode="aspectFill" class="cover"  ></image>
			<view class="base-info">
				<view class="user-desc">
					<view class="top">
						<image :src="user.avatar" mode="aspectFill" class="avatar" @tap.stop="preview(user.avatar)"></image>
						<view class="desc">
						  <view class="name">{{user.name}}</view>
							<view class="gender">
								<view class="address" v-if="user.city" >{{user.city}}</view>
								<text class="vLine" v-if="user.city"></text>
								<view class="">ID: {{user.id}}</view>
								<image v-if="user.gender==1"  src="../../../static/images/user/male.svg" mode=""></image>
								<image v-if="user.gender==2" src="../../../static/images/user/female.svg" mode=""></image>
							</view>
							<view class="follow-num">
								<view >关注: {{followingsNum}} &nbsp;</view>
								<text class="vLine"></text>
								<view>&nbsp; 粉丝: {{followersNum}}</view>
							</view>
						</view>
					</view>
					
					<view class="intro">
						<view class="bio" v-if="!user.bio ">简介：什么都没有留下喔~</view>
						<view class="bio" v-if="user.bio ">
							<text>简介：</text>
							<view class="content">
								{{user.bio}}
							</view>
						</view>
					</view>
				</view>
				<!-- 判断是当前用户还是查看用户，对应显示不同的操作 -->
				<view class="edit" @click="goEdit" v-if="uid == mid && !isLoad">编辑</view>
				<!-- <button type="default" @click="test">test</button> -->
				<view class="follow"  v-if="uid != mid && !isLoad" >
					<image src="/static/images/icon/follow_unliked.png" mode="" @tap.stop="follow" v-if="unfollowed"></image>
					<image src="/static/images/icon/follow_liked.png" mode="	" @tap.stop="unfollow" v-if="followed"></image>
				</view>
			</view>	
		</view>	
		
	  <view >
	  	<card  :postsRecord="postsRecord" cangodetail="true" :touserhp="false" v-if="!isLoad"></card>
			<view class="none" v-if="!isLoad && !postsRecord.length">
				还没有发布记录喔~
			</view>
	  </view>
	</view>

</template>

<script>
	import api from '../../../common/api.js'
	import card from '../../../components/common/card.vue'
	export default {
		
		
		components: {
			card
		},
		data() {
			return {
				unfollowed:false,				//未关注
				followed:false,					//记录是否关注状态
				postsRecord:[],					//用户打卡内容
				user:[],								//查看用户信息
				me:[],									//当前登录用户信息
				isLoad:1,								//是否加载完成
				uid:null,								//查看用户
				mid:null,								//当前登录用户
				followstatus:null,			//关注状态
				followersNum:null,			//粉丝数量
				followingsNum:null,			//关注数量
				
				// 分享相关字段
				share_title:'',			//分享标题
				share_cover:'',			//分享封面
				share_path:''				//分享路径
			}
		},
		
		methods:{	
			preview(image) {//预览头像
				let img = []
				img.push(image)
				console.log(img);
				uni.previewImage({//传入urls必须是一个数组
					current:0,
					urls:img
				})
			},
			async getUser() {//获取当前用户信息
				let res = await api.GetMe()
				this.me = res[0]
				this.mid = this.me.id
			},
			async getPostsRecord(uid) {//被查看用户信息，包括自己
				this.postsRecord = await api.GetCheckUserRecord(uid)
			},
			goEdit() {//修改用户信息
				uni.navigateTo({
					url:'/pages/user/comps/setup'
				})
			},
			async checkUser(uid) {//用户信息
				let res = await api.CheckUser(uid)
				this.user = res[0]
				this.share_title = this.user.share_title
				this.share_path = this.user.share_path
				this.share_cover = this.user.share_cover
				console.log('user',this.user);
			},
			async follow() {//关注用户
				this.res = await api.Follow(this.uid)
				if(this.res.err == 0) {
					this.unfollowed = false
					this.followed  = true
					this.followersNum = await api.GetOtherErsNum(this.uid)
					console.log(this.res );
				}
			},
			async unfollow() {//取消关注用户
				this.res = await api.UnFollow(this.uid)
				if(this.res.err == 0) {
					this.unfollowed  = true
					this.followed  = false
					this.followersNum = await api.GetOtherErsNum(this.uid)
					console.log(this.res );
				}
				
			},
			async getFolloewStatus(uid) {//查询关注状态
				this.followstatus = await api.IsFollow(uid)
				if(this.followstatus.err == 2) {
					this.unfollowed = true
				}else {
					this.followed = true
				}
			},
			async getFollowersNum(){//获取关注我的用户数量
				this.followersNum = await api.GetFollowersNum()
			},
			async getfollowingsNum(){//获取我关注的用户数量
				this.followingsNum = await api.GetFollowingsNum()
			},
			
		},
		
		async onLoad(p) {
			this.isLoad = 1
			this.uid = p.id
			await this.getUser()
			await this.getFolloewStatus(this.uid)
			await this.checkUser(this.uid)
			if(this.uid == this.mid) {
				await this.getFollowersNum()
				await this.getfollowingsNum()
			}else {
				this.followersNum = await api.GetOtherErsNum(this.uid)
				this.followingsNum = await api.GetFollowOtherNum(this.uid)
			}
			this.isLoad = 0
			
		},
				
		async onShow() {
			await this.getPostsRecord(this.uid)
		},
		
		onShareAppMessage: function(res) {//点击右上角分享小程序
			return {
				title:this.share_title,
				path: this.share_path,
				imageUrl: this.share_cover,
			}
		},
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #FFFFFF;
}
.none {
	display: flex;
	height: calc(100vh - 450rpx);
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
	color: #A7AAB5;
}
.user-info{
	height: 450rpx;
	position: relative;
	.transparent {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		background:rgba(2, 2, 2, 0.15);
	}
	.cover {
		position: absolute;
		z-index: -2;
		width: 100%;
		height: 450rpx;
		// filter: blur(4px); 
	}
	.base-info {	
		position: relative;
		height: 450rpx;
		display: flex;
		
		.user-desc {
			margin-top: 180rpx;
			display: flex;
			flex-direction: column;
			color: #FFFFFF;	
			.top {
				display: flex;
				// align-items: center;
				image {
					margin-left: 20rpx;  
					width: 130rpx;
					height: 130rpx;	
					border-radius: 50%;
				}
				.desc {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 300rpx;
					// height: 100rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					image {
						margin-left: 8rpx;
						width: 35rpx;
						height: 35rpx;
					}
					.gender {
						display: flex;
						align-items: center;
					}
					.follow-num {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #fff;
					}
					.vLine {
						border-left: solid 1px #fffefe;
						height: 12px;
						margin: 0 15rpx;
						vertical-align: middle;
						display: inline-block;
					}
					
				}
			}
			.bio {
				height: 80rpx;
				margin-left: 55rpx;
			}
			
			.bio {
				display: flex;
				font-size: 30rpx;
				margin-top: 10rpx;
				.content {
					width: 400rpx;
					height: 80rpx;
					line-height: 40rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
		.edit {
			display: flex;
			color: #fff;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 60rpx;
			right: 50rpx;
			width: 130rpx;
			height: 70rpx;
			border-radius: 10rpx;
			background-color: rgba(0, 0, 0, 0.23);
		}
		.follow {
			position: absolute;
			image {
				width: 80rpx;
				height: 80rpx;
			}
			bottom: 55rpx;
			right: 50rpx;
			// background-color: rgba(0,0,0,.5);
		}
	}
}
	
</style>
